<template>
    <div class="people">
        <div class="head flex">
            <div class="img">
                <img :src="detail ? detail.imageUrl : 'https://cxj.szzkba.cn/upload/i/2024/08/02/151232.png'" alt="">
            </div>
            <div>
                <text>{{ detail.user_Nickname }}</text>
            </div>
        </div>
        <div class="info flex-a flex-b">
            <div class="item">
                <div><text>{{ num }}</text>次</div>
                <div>已服务</div>
            </div>
            <div class="item">
                <div><text>{{ num > 0 ? 100 : 0 }}</text>%</div>
                <div>好评率</div>
            </div>
        </div>
        <div class="tabs">
            <nut-tabs v-model="tab" size="normal" background="#F6F6F6" name="tab" auto-height>
                <nut-tab-pane title="服务承诺" pane-key="1">
                    <div class="service-promise">
                        <div>服务标准承诺</div>
                        <div>1、报价/抢单
                        </div>
                        <div>1.1 看清订单信息
                        </div>
                        <div>仔细查看订单服务信息(商品信息、物流信息、客户信息、时间要求、特殊要求等)。
                        </div>
                        <div>·一口价订单和预付款订单禁止乱抢单，
                        </div>
                        <div>1.2 合理报价
                        </div>
                        <div>·报价不能低于平台限制的最低金额，
                        </div>
                        <div>·根据当地市场行情合理报价。
                        </div>
                        <div>·报价金额一旦提交后不可更改，
                        </div>
                        <div>2、预约客户
                        </div>
                        <div>2.1接到订单 2 小时内完成预约
                        </div>
                        <div>·商家订单被指派后 2 小时内完成预约(未到货的以到货时间为准)。家庭订单被指派后建议 30 分钟内完成预约。
                        </div>
                        <div>·预约时间确定后在 APP 及时提交，未确定预约时间的在 APP 提交预约失败并及时保持跟进。
                        </div>
                        <div>·指派时间在当天晚上 20:00-次日早上 8:00 的订单,
                        </div>
                        <div>2、预约客户
                        </div>
                        <div>2.1 接到订单 2 小时内完成预约
                        </div>
                        <div>商家订单被指派后2小时内完成预约(未到货的以到货时间为准)。家庭订单被指派后建议 30分钟内完成预约。
                        </div>
                        <div>·预约时间确定后在 APP 及时提交，未确定预约时间的在 APP 提交预约失败并及时保持跟进。
                        </div>
                        <div>·指派时间在当天晚上 20:00-次日早上 8:00 的订单，可在 10:00 前完成预约。
                        </div>
                        <div>西藏、新疆、青海地区指派时间在当天晚上 22:00-次日上午 10:00 的订单，可在 12:00 前完成预约。
                        </div>
                        <div>2.2 和客户核实订单信息
                        </div>
                        <div>·核对订单服务内容，确认所服务商品与订单是否一致。安装和送装类服务需确认商品是否到货。
                        </div>
                        <div>·确认清楚施工环境(如是否有电梯，小区能否进货车，是否高空作业等)。
                        </div>
                        <div> 2.3 说明可能产生的额外费用
                        </div>
                        <div>·与客户或用户提前说明可能产生的额外费用(如上门费、检测费、配件费、高空费等)避免上门后下单方不认可造成投诉。
                        </div>
                        <div>2.4 异常情况处理说明
                        </div>
                        <div>·预约时客户电话无法接通，先发送短信告知客户接听电话，并 APP 操作预约失败。如多次联系不上客户需及时联系下单方处理。
                        </div>
                        <div>·客户电话信息错误(如空号/停机/不是本人)，联系下单方处理。
                        </div>
                        <div> ·预约时客户不需要服务了，联系下单方处理，
                        </div>
                        <div>·预约后客户联系师傅需要修改预约时间，协商后在APP 上变更预约时间，如不确定则协商下次预约时间并在 APP 提交预约失败。
                        </div>
                        <div>3、注:仅适用送装服务
                        </div>
                        <div>3.1提货信息确认
                        </div>
                        <div>·提货前先确认物流站点地址、提货时间、订单信息是否到货和运费等。
                        </div>
                        <div>3.2 货物检查和验收
                        </div>
                        <div>·提货时检查核实货物、件数、包装、收货人信息等确认无误后在 APP 上传物流单和货物照片并操作收。
                        </div>
                        <div>·提货时如出现货物破损等情况，及时联系下单方确认是否需要异常签收。如需要则在 APP 操作异常签收,并上传货物损坏部位照片。
                        </div>
                        <div>·如订单没有填写物流地址，物流点到客户家高德导航最近线路超出 30Km，联系下单方沟通按照平台标准收取超区费。
                        </div>
                        <div>·提货后运输途中保护好货物，不得擅自拆除外包装避免磕碰，雨季提货时注意检查是否渗水。
                        </div>
                        <div>4、上门服务
                        </div>
                        <div>4.1 上门前准备
                        </div>
                        <div>·上门前穿着万师傅工装，准备好所需工具，
                        </div>
                        <div>·手机保持畅通，不拒接用户和客户电话，
                        </div>
                        <div>4.2上门前确认
                        </div>
                        <div>·上门服务时间前1小时和客户再次联系确认，告知预计到达时间。
                        </div>
                        <div>4.3 准时抵达并签到
                        </div>
                        <div>·上门后轻敲门、礼貌问候、表明身份，进门前穿戴好鞋套。
                        </div>
                        <div>·针对需要特殊场景施工的订单，主动向客户出示相关资质证件(如电工证、高空作业证、开锁备案证明)
                        </div>
                    </div>
                </nut-tab-pane>
                <nut-tab-pane title="认证信息" pane-key="2">
                    <div class="sure-info flex-a flex-b">
                        <div class="left flex-a">
                            <div><img src="https://cxj.szzkba.cn/upload/i/2024/12/03/152416.png" alt=""></div>
                            <div>
                                <div class="title">实名认证</div>
                                <div class="des">已提供有效的身份证明</div>
                            </div>
                        </div>
                        <div class="right flex-a" v-if="detail.user_Leisures && detail.user_Services">
                            <Checked color="#69C892" size="16" />
                            <text>已认证</text>
                        </div>
                        <div class="right flex-a" v-else>
                            <MaskClose color="#69C892" size="16" />
                            <text>未认证</text>
                        </div>
                    </div>
                </nut-tab-pane>
                <nut-tab-pane title="完工照片" pane-key="5">
                    <div v-for="item in picList" class="pic-list">
                        <img :src="item" alt="">
                    </div>
                </nut-tab-pane>
            </nut-tabs>
            <div class="btns">
                <nut-button shape="square" type="info" color="#F0A93F" block
                    @click="jumpTo('/packageA/pages/detail/index?index=' + index + '&id=' + id + '&mealActive=' + mealActive)">选择师傅</nut-button>
            </div>
        </div>
    </div>
</template>

<script lang="ts">
import Taro, { useRouter } from '@tarojs/taro';
import { Left, Checked, MaskClose } from '@nutui/icons-vue-taro';
import { reactive, toRefs, onMounted } from 'vue';
import { getUseFinishOrder, getUsePictureList, getFindUserDetails } from '../../../../api/index'
export default {
    components: {
        Left, Checked, MaskClose
    },
    setup() {
        const data = reactive({
            tab: 1,
            num: 0,
            picList: [],
            detail: {},
            user_ID: '',
            index: '' as any,
            id: '',
            mealActive: '',
        });
        onMounted(() => {
            const router = useRouter();
            if (router.params.user_ID) {
                data.user_ID = router.params.user_ID
                getNum(router.params.user_ID)
                getPicList(router.params.user_ID)
                getDetail(router.params.user_ID)
            }
            if (router.params.index) {
                data.index = router.params.index
            }
            if (router.params.id) {
                data.id = router.params.id
            }
            if (router.params.mealActive) {
                data.mealActive = router.params.mealActive
            }
        })
        const getNum = (id) => {
            getUseFinishOrder({ userId: id }).then(res => {
                if (res.code == 0) {
                    data.num = res.data
                }
            })
        }
        const getDetail = (id) => {
            getFindUserDetails({ User_ID: id }).then(res => {
                if (res.code == 0) {
                    data.detail = res.data.reuserDetails
                }
            })
        }
        const getPicList = (id) => {
            getUsePictureList({ userId: id }).then(res => {
                if (res.code == 0) {
                    data.picList = res.data
                }
            })
        }
        const jumpTo = (path) => {
            Taro.redirectTo({ url: path });
        }
        return {
            ...toRefs(data), jumpTo, getNum, getDetail, getPicList
        }
    }
};
</script>


<style lang="scss">
.people {
    .head {
        background: #EADDBD;
        color: #fff;
        height: 300rpx;
        padding: 50rpx 40rpx 0;
        box-sizing: border-box;
        font-weight: bold;

        .img {
            img {
                width: 100rpx;
                height: 100rpx;
                border-radius: 50%;
                margin-right: 20rpx;
            }
        }
    }

    .info {
        width: 92%;
        margin: -100rpx auto 0;
        background: #fff;
        border-radius: 20rpx;
        height: 180rpx;

        .item {
            width: 50%;
            text-align: center;
            box-sizing: border-box;

            div {
                color: #373737;
                font-size: 20rpx;

                text {
                    font-weight: bold;
                    font-size: 50rpx;
                    margin-right: 10rpx;
                }
            }

            div:last-child {
                color: #C0C0C0;
                font-size: 24rpx;
                margin-top: 6rpx;
            }
        }

        .item:last-child {
            border-left: 1rpx solid #F7F7F7;
        }
    }

    .tabs {
        .nut-tabs__titles-item__line {
            width: 40rpx;
        }

        .nut-tabs__titles-item.active {
            color: #79C388;

            .nut-tabs__titles-item__line {
                background: #79C388;
                width: 40rpx;
            }
        }

        .nut-tab-pane {
            background: #F6F6F6 !important;
        }

        .btns {
            padding: 20rpx 40rpx;
            box-sizing: border-box;
            width: 100%;
            text-align: center;

            .nut-button {
                margin: 0 auto;
                border-radius: 100rpx;
                background: #21C38F;
            }
        }

        .service-promise {
            border-radius: 20rpx;
            background: #fff;
            padding: 40rpx 40rpx;
            color: #999999;
            font-size: 26rpx;
            line-height: 36rpx;
            text-align: justify;
        }

        .sure-info {
            border-radius: 20rpx;
            background: #fff;
            padding: 40rpx;

            img {
                width: 100rpx;
                height: 100rpx;
                margin-right: 30rpx;
            }

            div {
                white-space: nowrap;
            }

            .title {
                color: #373737;
                font-size: 36rpx;
            }

            .des {
                color: #9A9A9A;
                font-size: 24rpx;
                margin-top: 10rpx;
            }

            text {
                color: #67C58D;
                font-size: 28rpx;
                margin-left: 20rpx;
            }
        }

        .pic-list {
            img {
                width: 49%;
                height: 300rpx;
                border-radius: 20rpx;
                margin-bottom: 20rpx;
            }

            img:nth-child(odd) {
                margin-right: 2%;
            }
        }
    }
}
</style>